<!DOCTYPE HTML>
<html lang="zh">
<head>
    <title>期刊管理系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* 使页面背景和字体更为现代化 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fc;
            padding-top: 20px;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 20px;
        }

        h1, h2 {
            font-weight: bold;
            color: #333;
        }

        h1 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        h2 {
            font-size: 28px;
            margin-bottom: 20px;
            color: #0066cc;
        }

        /* 增强输入框和按钮的视觉效果 */
        .form-control {
            border-radius: 8px;
            box-shadow: none;
            padding: 10px;
            margin-bottom: 10px;
        }

        .form-control:focus {
            border-color: #0066cc;
            box-shadow: 0 0 8px rgba(0, 102, 204, 0.5);
        }

        button {
            border-radius: 8px;
            padding: 10px 20px;
            font-size: 16px;
        }

        button:hover {
            opacity: 0.9;
        }

        /* 表格样式 */
        .table {
            border-collapse: separate;
            border-spacing: 0 15px;
        }

        .table td, .table th {
            padding: 12px;
            text-align: center;
            vertical-align: middle;
        }

        .table th {
            background-color: #0066cc;
            color: white;
            font-size: 16px;
        }

        .table td {
            background-color: white;
            color: #555;
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table td a,
        .table td button {
            font-size: 14px;
        }

        /* 搜索框样式 */
        .form-group input {
            border-radius: 8px;
            margin-right: 10px;
        }

        /* 增加按钮区的间距 */
        .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .form-group button {
            margin-left: 10px;
            background-color: #0066cc;
            color: white;
        }

        /* 响应式布局：小屏幕优化 */
        @media (max-width: 768px) {
            .table th, .table td {
                padding: 8px;
                font-size: 14px;
            }

            h1 {
                font-size: 28px;
            }

            h2 {
                font-size: 22px;
            }

            .form-group {
                flex-direction: column;
            }

            .form-group input,
            .form-group button {
                width: 100%;
                margin-bottom: 10px;
            }

            .table {
                margin-top: 20px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center">期刊管理系统</h1>
    <h2>保存期刊</h2>

    <!-- 搜索框 -->
    <div class="form-group">
        <input type="text" id="searchTitle" class="form-control" placeholder="按标题搜索期刊">
        <input type="text" id="searchAuthors" class="form-control" placeholder="按作者搜索期刊">
        <input type="text" id="searchPubDate" class="form-control" placeholder="按发布日期搜索期刊">
        <button type="button" class="btn btn-primary mt-2" onclick="searchJournal()">搜索</button>
    </div>

    <!-- 添加/编辑期刊表单 -->
    <form id="journalForm" class="mb-4">
        <div class="form-group">
            <input class="form-control" id="id" placeholder="ID" required>
        </div>
        <div class="form-group">
            <input class="form-control" id="title" placeholder="标题" required>
        </div>
        <div class="form-group">
            <input class="form-control" id="authors" placeholder="作者" required>
        </div>
        <div class="form-group">
            <textarea class="form-control" id="abstracts" placeholder="摘要" required></textarea>
        </div>
        <div class="form-group">
            <input class="form-control" id="pdfurl" placeholder="网址" required>
        </div>
        <div class="form-group">
            <input class="form-control" id="pubDate" placeholder="出版日期" required>
        </div>
        <button type="button" class="btn btn-primary" onclick="saveJournal()">保存</button>
    </form>

    <!-- 期刊列表 -->
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>作者</th>
            <th>摘要</th>
            <th>出版日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="journalList"></tbody>
    </table>
</div>

<script>
    const apiUrl1 = 'http://127.0.0.1:8080/journal/list';
    const apiUrl2 = 'http://127.0.0.1:8080/journal/save';
    const apiUrl3 = 'http://127.0.0.1:8080/journal/update/${id}';
    const apiUrl4 = 'http://127.0.0.1:8080/journal';

    function fetchJournals() {
        fetch(apiUrl1)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络错误');
                }
                return response.json();
            })
            .then(result => {
                const journalEntityList = result.data;
                const list = document.getElementById('journalList');
                list.innerHTML = '';
                journalEntityList.forEach(journalEntityList => {
                    const row = `<tr>
                        <td>${journalEntityList.id}</td>
                        <td>${journalEntityList.title}</td>
                        <td>${journalEntityList.author}</td>
                        <td>${journalEntityList.abstracts}</td>
                        <td>${journalEntityList.pdfurl}</td>
                        <td>${journalEntityList.pubDate}</td>
                        <td>
                            <a href="edit_journal.html?id=${journalEntityList.id}" class="btn btn-warning">编辑</a>
                            <button class="btn btn-danger" onclick="deleteJournal(${journalEntityList.id})">删除</button>
                        </td>
                    </tr>`;
                    list.innerHTML += row;
                });
            })
            .catch(error => {
                console.error('发生错误:', error);
                alert(data.errorMsg || '无法加载期刊列表，请稍后再试。');
            });
    }

    function saveJournal() {
        const id = document.getElementById('id').value;
        const title = document.getElementById('title').value;
        const authors = document.getElementById('authors').value;
        const abstracts = document.getElementById('abstracts').value;
        const pdfurl = document.getElementById('pdfurl').value;
        const pubDate = document.getElementById('pubDate').value;

        if (!id || !title || !authors || !abstracts || !pdfurl || !pubDate) {
            alert('所有字段不能为空！');
            return;
        }

        const journalData = {
            id: id,
            title: title,
            author: authors,
            abstracts: abstracts,
            pdfurl: pdfurl,
            pubDate: pubDate,
        };

        fetch(apiUrl2, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(journalData)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                console.log(data);
                if (data.success === false) {
                    alert('保存失败');
                } else {
                    alert('保存成功');
                }
                fetchJournals();
                resetForm();
            })
            .catch(error => {
                console.error('There has been a problem with your fetch operation:', error);
                alert('操作失败，请重试。');
            });
    }

    function deleteJournal(id) {
        if (confirm('确定要删除这个期刊吗？')) {
            fetch(`${apiUrl4}/${id}`, {
                method: 'DELETE'
            })
                .then(response => {
                    if (response.ok) {
                        fetchJournals();
                        alert('删除成功');
                    } else {
                        alert('删除失败，请重试。');
                    }
                });
        }
    }

    function searchJournal() {
        const searchTitle = document.getElementById('searchTitle').value;
        const searchAuthors = document.getElementById('searchAuthors').value;
        const searchPubDate = document.getElementById('searchPubDate').value;

        let searchUrl = 'http://127.0.0.1:8080/journal/select' + `?title=${encodeURIComponent(searchTitle)}&authors=${encodeURIComponent(searchAuthors)}&pubDate=${encodeURIComponent(searchPubDate)}`;

        fetch(searchUrl, { method: 'GET' })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络错误');
                }
                return response.json();
            })
            .then(result => {
                const journalEntityList = result.data;
                const list = document.getElementById('journalList');
                list.innerHTML = '';

                journalEntityList.forEach(journal => {
                    const row = `<tr>
                        <td>${journal.id}</td>
                        <td>${journal.title}</td>
                        <td>${journal.author}</td>
                        <td>${journal.abstracts}</td>
                        <td>${journal.pdfurl}</td>
                        <td>${journal.pubDate}</td>
                        <td>
                            <a href="edit_journal.html?id=${journal.id}" class="btn btn-warning">编辑</a>
                            <button class="btn btn-danger" onclick="deleteJournal(${journal.id})">删除</button>
                        </td>
                    </tr>`;
                    list.innerHTML += row;
                });
            })
            .catch(error => {
                console.error('发生错误:', error);
                alert('无法加载期刊列表，请稍后再试。');
            });
    }

    function resetForm() {
        document.getElementById('journalForm').reset();
        document.getElementById('id').value = '';
    }

    window.onload = fetchJournals;
</script>
</body>
</html>
